<template>
  <div class="base-content wechatBinding">
    <div class="before-begin" v-if="currentStep === 'begin'">
      <div class="wechat-logo">
        <img src="../../../../../assets/img/weChatLogo.png" alt=""/>
        <span>
                    <p>
                      {{$t('configLazyLoad.channel.wexinTip8')}}<br/>
                      {{$t('configLazyLoad.channel.wexinTip08')}}
                    </p>
                </span>
      </div>
      <p>{{$t('configLazyLoad.channel.wexinTip117')}}</p>
      <el-button type="primary" class="primary_btn" @click="currentStep = 'chooseType'">{{$t('configLazyLoad.channel.wexinTip10')}}</el-button>
    </div>
    <div class="bindChoose" v-if="currentStep === 'chooseType'">
      <div class="title">{{$t('configLazyLoad.channel.wexinTip1')}}</div>
      <div class="wechatType">
        <div class="wechatoption" style="margin-right: 30px">
          <el-radio label="wechatAuth" v-model="choosewechatType" class="font18">{{$t('configLazyLoad.channel.wexinTip2')}}</el-radio>
          <p>{{$t('configLazyLoad.channel.wexinTip3')}}</p>
        </div>
        <div class="wechatoption">
          <el-radio label="wechatDock" v-model="choosewechatType" class="font18">{{$t('configLazyLoad.channel.wexinTip4')}}</el-radio>
          <p>{{$t('configLazyLoad.channel.wexinTip5')}}</p>
        </div>
      </div>
      <div style="margin: 20px">
        <el-button class="primary_btn" style="margin-right: 20px" @click="cancelType">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" class="primary_btn" @click="confirmType">{{$t('public.confirm')}}</el-button>
      </div>
    </div>
    <wechat-dock v-if="currentStep === 'wechatDock'" @cancel="reset"></wechat-dock>
    <wechat-auth v-if="currentStep === 'wechatAuth'" @reset="reset"></wechat-auth>
  </div>
</template>
<script>
  import wechatDock from './wechatDockStep.vue'
  import wechatAuth from './wechatAuthStep.vue'
  export default {
    name: 'wechatBinding',
    data () {
      return {
        tableData: [],
        choosewechatType: 'wechatAuth',
        currentStep: 'begin'
      }
    },
    methods: {
      reset () {
        this.currentStep = 'begin'
        this.choosewechatType = 'wechatAuth'
      },
      cancelType () {
        this.currentStep = 'begin'
        this.choosewechatType = 'wechatAuth'
      },
      confirmType () {
        if (this.choosewechatType === 'wechatAuth') {
          this.currentStep = 'wechatAuth'
        } else if (this.choosewechatType === 'wechatDock') {
          this.currentStep = 'wechatDock'
        }
      }
    },
    components: {
      wechatDock,
      wechatAuth
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .base-content
    text-align center
    .before-begin
      margin 25px
      background #f2f6fa
      >p
        margin-bottom 34px
        font-size 14px
        line-height 18px
      .el-button
        margin-bottom 28px
      .wechat-logo
        padding 34px 0 10px 0
        display table
        margin 0 auto
        span
          display table-cell
          vertical-align middle
          margin-left 10px
          p
            line-height 1.8
            margin-left 14px
            text-align left
    .bindChoose
      margin 25px
      padding 20px
      background #f2f6fa
      text-align center
      .title
        font-size 24px
        font-weight 700px
        margin 20px 0
      .wechatType
        padding 20px
        text-align: center
        .wechatoption
          text-align left
          width 140px
          display inline-block
          p
            color $cf-gray4
            padding-left 20px
</style>




















